<template>
	<view class="content" style="height: calc(100vh - 1px);">
		<u-navbar title="会员中心" :autoBack="true" :bgColor="bgColor"></u-navbar>
		<view class="applicationBox" v-if="applicationBox==1">
			<image :src="baseUrl+'distributionapplication.jpg'" class="distributionapplication" />
			<view class="personalBtn" @click="changeIndex(1,1)">
				个人申请
			</view>
			<view class="organizationBtn" @click="changeIndex(2,1)">
				机构申请
			</view>
		</view>
		<view class="personal1" v-if="personalIndex==1">
			<image :src="baseUrl+'personal1.jpg'" class="personal1bg" />
			<input type="text" class="personName" v-model="personal.name" />
			<view class="selectBox">
				<uni-data-select v-model="personal.sex" :localdata="sexArr" @change="changeSex()"></uni-data-select>
			</view>
			<input type="text" class="personAge" v-model="personal.age" />
			<input type="text" class="personIdcard" v-model="personal.idcard" maxlength="18" />
			<view class="selectBox">
				<view class="cityBox" @click="showRegion = true">
					<input name="region" class="cityInput" v-model="personal.address" disabled type="text"></input>
					<u-picker v-model="showRegion" :confirm-color="themeColor" cancel-color="#999" mode="region"
						@confirm="regionChange">
					</u-picker>
				</view>
			</view>
			<input type="text" class="personEmail" v-model="personal.email" />
			<view class="nextBtn" @click="changeIndex(1,2)">
				下一步
			</view>
		</view>
		<view class="personal2" v-else-if="personalIndex==2">
			<image :src="baseUrl+'personal2.jpg'" class="personal2bg" />
			<view class="idcradFrontBox">
				<image :src="personal.idcradFront" class="idcradFront" />
				<view class="idcradFrontSel" @click="uploadFile(1)"></view>
			</view>
			<view class="idcradBackBox">
				<image :src="personal.idcradBack" class="idcradBack" />
				<view class="idcradBackSel" @click="uploadFile(2)"></view>
			</view>
			<view class="nextBtn" @click="changeIndex(1,3)">
				下一步
			</view>
		</view>
		<view class="personal3" v-else-if="personalIndex==3">
			<image :src="baseUrl+'personal3.jpg'" class="personal3bg" />
			<text class="partyA">甲方：海南中卡伽澜生物科技有限公司</text>
			<text class="partyB">乙方：{{personal.name}}</text>
			<view class="agreeBox">
				<image :src="baseUrl+'select.png'" class="select" @click="agree(1)" v-if="isAgreePersonal==false" />
				<image :src="baseUrl+'selected.png'" class="select" @click="agree(1)" v-else />
				<text class="xieyi">我已认真阅读并同意《分销协议》</text>
			</view>
			<view class="nextBtn" @click="submitPersonal">
				提交
			</view>
		</view>
		<!-- 组织机构 -->
		<view class="organization1" v-if="organizationIndex==1">
			<image :src="baseUrl+'organization1.jpg'" class="organization1bg" />
			<input type="text" class="organizationName" v-model="organization.corporationname" />
			<input type="text" class="organizationBusiness" v-model="organization.business" />
			<input type="text" class="organizationScale" v-model="organization.scale" />
			<input type="text" class="organizationCorporation" v-model="organization.name" />
			<input type="text" class="organizationIdcard" v-model="organization.idcard" maxlength="18" />
			<view class="nextBtn" @click="changeIndex(2,2)">
				下一步
			</view>
		</view>
		<view class="organization2" v-else-if="organizationIndex==2">
			<image :src="baseUrl+'organization2.jpg'" class="organization2bg" />
			<view class="businessLicenseBox">
				<image :src="organization.license" class="businessLicense" />
				<view class="businessLicenseSel" @click="uploadFile(3)"></view>
			</view>
			<view class="nextBtn" @click="changeIndex(2,3)">
				下一步
			</view>
		</view>
		<view class="organization3" v-else-if="organizationIndex==3">
			<image :src="baseUrl+'organization3.jpg'" class="organization3bg" />
			<text class="partyA">甲方：海南中卡伽澜生物科技有限公司</text>
			<text class="partyB">乙方：{{organization.name}}</text>
			<view class="agreeBox">
			<image :src="baseUrl+'select.png'" class="select" @click="agree(2)" v-if="isAgreeOrganization==false" />
			<image :src="baseUrl+'selected.png'" class="select" @click="agree(2)" v-else />
			<text class="xieyi">我已认真阅读并同意《分销协议》</text>
			</view>
			<view class="nextBtn" @click="submitOrganization">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseURL,
		basePath
	} from '@/config/app'
	import {
		chooseImage,
		uploadFile,
		trottle
	} from '@/utils/tools.js'
	export default {
		data() {
			return {
				bgColor: 'transparent',
				baseUrl: `https://cdn.zkjialan.com/img/user/`,
				applicationBox: 1,
				isAgreePersonal: false,
				personalIndex: 0,
				personal: {
					name: '',
					sex: '',
					age: '',
					idcard: '',
					address: '',
					email: '',
					idcradFront: '',
					idcradBack: ''
				},
				sexArr: [{
					text: '女',
					value: 0
				}, {
					text: '男',
					value: 1
				}],
				showRegion: false, //显示地区选择的flag
				isAgreeOrganization: false,
				organizationIndex: 0,
				organization: {
					name: '',
					business: '',
					scale: '',
					corporationname: '',
					idcard: '',
					license: ''
				},

			}
		},
		methods: {
			submitOrganization() {
				if (!this.isAgreeOrganization) {
					this.$toast({
						title: '请阅读并同意分销协议'
					})
					return;
				}
				this.$request.post(`shopapi/Distribution/apply`, {
					// user_id: JSON.parse(uni.getStorageSync('store_userId')).value,
					real_name: this.organization.name,
					id_card: this.organization.idcard,
					institution: this.organization.corporationname,
					business: this.organization.business,
					scale: this.organization.scale,
					license: this.organization.license,
					type: 2
				}).then(res => {
					console.log(res.data);
					if (res.data.code == 1) {
						this.$toast({
							title: '提交成功，即将返回个人中心'
						})
						setTimeout(() => {
							this.$switchTab('/pages/user/user');
						}, 1000);
						return;
					}
					this.$toast({
						title: res.data.msg
					})
				})
			},
			submitPersonal() { //提交个人
				if (!this.isAgreePersonal) {
					this.$toast({
						title: '请阅读并同意分销协议'
					})
					return;
				}
				this.$request.post(`shopapi/Distribution/apply`, {
					// user_id: JSON.parse(uni.getStorageSync('store_userId')).value,
					real_name: this.personal.name,
					sex: this.personal.sex,
					age: this.personal.age,
					id_card: this.personal.idcard,
					email: this.personal.email,
					portrait: this.personal.idcradFront,
					national_emblem: this.personal.idcradBack,
					city: this.personal.address,
					type: 1
				}).then(res => {
					console.log(res.data);
					if (res.data.code == 1) {
						this.$toast({
							title: '提交成功，即将返回个人中心'
						})
						setTimeout(() => {
							this.$switchTab('/pages/user/user');
						}, 1000);
						return;
					}
					this.$toast({
						title: res.data.msg
					})
				})
			},
			agree(num) {
				if (num == 1) {
					this.isAgreePersonal = !this.isAgreePersonal;
				} else {
					this.isAgreeOrganization = !this.isAgreeOrganization;
				}
			},
			// 上传图片
			async uploadFile(num) {
				console.log(num);
				const [error, success] = await uni.chooseImage({
					count: 1
				})
				if (error) {
					return
				}
				uni.showLoading({
					title: '上传中...'
				})
				try {
					const file = await uploadFile(success.tempFilePaths[0]);
					console.log(file);
					if (num == 1) {
						this.personal.idcradFront = file.uri
					} else if (num == 2) {
						this.personal.idcradBack = file.uri
					} else if (num == 3) {
						this.organization.license = file.uri
					}
					uni.hideLoading()
				} catch (e) {
					this.$toast({
						title: '上传失败，请稍后再试'
					})
					uni.hideLoading()
				}

			},
			changeIndex(type, num) {
				console.log('type' + type);
				console.log('num' + num);
				if (type == 1) { //个人
					if (num == 2) {
						if (this.areAllPropertiesFilled(this.personal, ['idcradBack', 'idcradFront']) === true) {
							console.log("All properties have values.");
						} else {
							this.$toast({
								title: this.areAllPropertiesFilled(this.personal)
							});
							return;
						}
					}
					this.personalIndex = num;
					this.applicationBox = 0;
				} else {
					if (num == 2) {
						if (this.areAllPropertiesFilled(this.organization, ['license']) === true) {
							console.log("All properties have values.");
						} else {
							this.$toast({
								title: this.areAllPropertiesFilled(this.organization)
							});
							return;
						}
					}
					this.organizationIndex = num;
					this.applicationBox = 0;
				}
			},
			changeSex(e) {
				console.log(e);
				this.personal.sex = '' + e;
			},
			// 地区选择，选择当前省市区的ID
			regionChange(region) {
				const {
					city,
					province,
					area
				} = region
				this.personal.address = province.label + "," + city.label + "," + area.label
			},
			areAllPropertiesFilled(obj, ignoreProperties = []) {
				// 遍历对象的所有属性
				for (var key in obj) {
					// 如果属性名在忽略列表中，则跳过验证
					if (ignoreProperties.includes(key)) {
						continue;
					}
					// 如果属性名为idcard，使用身份证号码的正则表达式验证属性值
					if (key === 'idcard') {
						console.log(key);
						var idCardRegExp =
							/^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
						if (!idCardRegExp.test(obj[key])) {
							return '身份证号码格式不正确';
						}
					}
					// 如果属性名为email，使用邮箱格式验证属性值
					else if (key === 'email') {
						console.log(key);
						var emailRegExp = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
						if (!emailRegExp.test(obj[key])) {
							return '邮箱格式不正确';
						}
					}
					// 如果属性值为空，则返回 false
					else if (obj[key] === null || obj[key] === undefined || obj[key] === '') {
						return '请填写完所有内容';
					}
				}
				// 所有属性验证通过，返回 true
				return true;
			}
		},
		computed: {},
		onLoad() {},
		onShow() {}
	}
</script>

<style lang="scss" scoped>
	.agreeBox{
		position: relative;
		display: flex;
		align-items: center;
		margin-top: 6980rpx;
	}
	.xieyi{
		position: relative;
		font-size: 30rpx;
		font-weight: 600;
		margin-left: 20rpx;
	}
	.organization3 {
		position: relative;
		width: 750rpx;
		height: 7795rpx;
		overflow-y: scroll;

		.nextBtn {
			position: relative;
			width: 600rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			color: #fff;
			font-family: 'am';
			border-radius: 45rpx;
			margin-left: 76rpx;
			margin-top: 100rpx;
			background-color: #f08229;
		}

		.select {
			position: relative;
			width: 35rpx;
			height: 35rpx;
			margin-left: 40rpx;
			// margin-top: 6920rpx;
		}

		.partyA {
			position: relative;
			color: #141414;
			font-size: 27rpx;
			font-family: 'ar';
			margin-left: 43rpx;
			margin-top: 380rpx;
			display: block;
		}

		.partyB {
			position: relative;
			color: #141414;
			font-size: 27rpx;
			font-family: 'ar';
			margin-left: 43rpx;
			margin-top: 20rpx;
			display: block;
		}
		
		.organization3bg {
			position: absolute;
			width: 100%;
			height: 100%;
		}
	}

	.organization2 {
		position: relative;
		width: 750rpx;
		height: 1500rpx;
		overflow-y: scroll;

		.businessLicenseBox {
			position: relative;
			width: 670rpx;
			height: 415rpx;
			margin-left: 40rpx;
			margin-top: 348rpx;

			.businessLicense,
			.businessLicenseSel {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
			}
		}

		.nextBtn {
			position: relative;
			width: 600rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			color: #fff;
			font-family: 'am';
			border-radius: 45rpx;
			margin-left: 76rpx;
			margin-top: 100rpx;
			background-color: #f08229;
		}

		.organization2bg {
			position: absolute;
			width: 100%;
			height: 100%;
		}
	}

	.organization1 {
		position: relative;
		width: 750rpx;
		height: 1500rpx;
		overflow-y: scroll;

		.organizationName,
		.organizationBusiness,
		.organizationScale,
		.organizationCorporation,
		.organizationIdcard {
			position: relative;
			width: 664rpx;
			height: 86rpx;
			margin-left: 38rpx;
			margin-top: 333rpx;
			padding-left: 10rpx;
		}

		.organizationBusiness,
		.organizationScale,
		.organizationCorporation,
		.organizationIdcard {
			margin-top: 105rpx;
		}

		.organization1bg {
			position: absolute;
			width: 100%;
			height: 100%;
		}

		.nextBtn {
			position: relative;
			width: 600rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			color: #fff;
			font-family: 'am';
			border-radius: 45rpx;
			margin-left: 76rpx;
			margin-top: 100rpx;
			background-color: #f08229;
		}
	}

	.personal3 {
		position: relative;
		width: 750rpx;
		height: 7795rpx;
		overflow-y: scroll;

		.nextBtn {
			position: relative;
			width: 600rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			color: #fff;
			font-family: 'am';
			border-radius: 45rpx;
			margin-left: 76rpx;
			margin-top: 100rpx;
			background-color: #f08229;
		}

		.select {
			position: relative;
			width: 35rpx;
			height: 35rpx;
			margin-left: 40rpx;
			// margin-top: 6920rpx;
		}

		.partyA {
			position: relative;
			color: #141414;
			font-size: 27rpx;
			font-family: 'ar';
			margin-left: 43rpx;
			margin-top: 360rpx;
			display: block;
		}

		.partyB {
			position: relative;
			color: #141414;
			font-size: 27rpx;
			font-family: 'ar';
			margin-left: 43rpx;
			margin-top: 20rpx;
			display: block;
		}

		.personal3bg {
			position: absolute;
			width: 100%;
			height: 100%;
		}
	}

	.personal2 {
		.idcradBackBox {
			position: relative;
			width: 670rpx;
			height: 405rpx;
			margin-left: 40rpx;
			margin-top: 105rpx;

			.idcradBack,
			.idcradBackSel {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
			}
		}

		.idcradFrontBox {
			position: relative;
			width: 670rpx;
			height: 405rpx;
			margin-left: 40rpx;
			margin-top: 332rpx;

			.idcradFront,
			.idcradFrontSel {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
			}
		}

		position: relative;
		width: 100%;
		height: 1567rpx;
		overflow-y: hidden;

		.personal2bg {
			position: absolute;
			width: 100%;
			height: 100%;
		}

		.nextBtn {
			position: relative;
			width: 600rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			color: #fff;
			font-family: 'am';
			border-radius: 45rpx;
			margin-left: 76rpx;
			margin-top: 100rpx;
			background-color: #f08229;
		}
	}

	.personal1 {
		.nextBtn {
			position: relative;
			width: 600rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			color: #fff;
			font-family: 'am';
			border-radius: 45rpx;
			margin-left: 76rpx;
			margin-top: 100rpx;
			background-color: #f08229;
		}

		.selectBox,
		.personAge,
		.personIdcard,
		.personEmail {
			position: relative;
			width: 664rpx;
			height: 86rpx;
			margin-left: 38rpx;
			margin-top: 104rpx;
			padding-left: 10rpx;

			.cityInput {
				width: 100%;
				height: 86rpx;
				line-height: 86rpx;
			}
		}

		.personEmail {
			margin-top: 100rpx;
		}

		.personName {
			position: relative;
			width: 664rpx;
			height: 86rpx;
			margin-left: 38rpx;
			margin-top: 333rpx;
			padding-left: 10rpx;
		}

		.personal1bg {
			position: absolute;
			width: 100%;
			height: 100%;
		}

		position: relative;
		width: 100%;
		height: 1688rpx;
		overflow-y: hidden;
	}

	.applicationBox {
		width: 100%;
		height: 100%;
		position: relative;

		.personalBtn,
		.organizationBtn {
			position: absolute;
			width: 450rpx;
			height: 100rpx;
			left: 165rpx;
			top: 1030rpx;
			text-align: center;
			line-height: 100rpx;
			background-color: #f08229;
			border-radius: 50rpx;
			color: #fff;
			font-size: 30rpx;
			font-family: 'am';
		}

		.organizationBtn {
			top: 1165rpx;
		}

		.distributionapplication {
			width: 750rpx;
			height: 1448rpx;
		}
	}

	/deep/.uni-select__input-placeholder {
		display: none;
	}

	/deep/.uni-select,
	.uni-date-x--border {
		border: none;
		padding: 0;
	}

	/deep/.uni-stat__select {
		height: 100%;
	}

	/deep/.uni-icons {
		display: none;
	}

	/deep/.u-title {
		font-size: 33rpx !important;
		font-family: 'am';
		color: #000000 !important;
	}

	/deep/ .u-icon__icon {
		color: #000000 !important;
	}

	.content {
		position: fixed;
		width: 100%;
		height: 100vh;
		background-color: #fff;
		overflow-y: scroll;
	}

	/deep/ page {
		width: 100%;
		height: 100vh;
		background-color: #fff;
		overflow-y: scroll;
		padding-bottom: 0 !important;
	}
</style>